<template>
	<view class="layout">
		<view class="goBack" @click="goBack" :style="{top:(getStatusBarHeight()-2)+'px'}">
			<view class="backbtn">
				<uni-icons type="back" color="#fff" size="20"></uni-icons>
			</view>
			<text style="color: #333333;" v-if="gameid == ''">今日排行</text>
			<text style="color: #fff; background-color: rgba(0, 0, 0, 0.6);"
				v-if="gameid != ''">{{gameName+"今日大奖排行"}}</text>
			<view class="kong">
			</view>
		</view>

		<view class="bg" :style="{opacity: bgOpacity}">
			<image class="wallet" :src="rankbg" mode="aspectFill"></image>
		</view>
		<view class="content" v-if="usertype == 2">
			<view class="segmented" v-if="gameid == ''">
				<uni-segmented-control class="segmented-control" :current="current" :values="items"
					:style-type="styleType" active-color="#ef3421" @clickItem="onClickItem" />
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="rank-list">
					<view class="rank-first">
						<image class="bg" src="../../static/bg_one.png" mode="aspectFill"></image>
						<view class="header">
							<image class="icon" :src="firstUer.avatar?firstUer.avatar:'../../static/logo.png'" mode="aspectFill"></image>
							<view class="nickname">
								{{firstUer.nickname? firstUer.nickname:"Unkown"}}
							</view>
						</view>
						<view class="score" v-if="usertype != 1 && firstUer.userscore">
							<!-- <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image> -->
							<view class="money">
								{{firstUer.userscore.toLocaleString()}}
							</view>
						</view>
					</view>
					<view class="rank-first">
						<image class="bg" src="../../static/bg_two.png" mode="aspectFill"></image>
						<view class="header">
							<image class="icon" :src="secondUser.avatar?secondUser.avatar:'../../static/logo.png'" mode="aspectFill"></image>
							<view class="nickname">
								{{secondUser.nickname ? secondUser.nickname:"Unkown"}}
							</view>
						</view>
						<view class="score" v-if="usertype != 1 && secondUser.userscore">
							<!-- <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image> -->
							<view class="money">
								{{secondUser.userscore.toLocaleString()}}
							</view>
						</view>
					</view>
					<view class="rank-first">
						<image class="bg" src="../../static/bg_three.png" mode="aspectFill"></image>
						<view class="header">
							<image class="icon" :src="thirdUser.avatar?thirdUser.avatar:'../../static/logo.png'" mode="aspectFill"></image>
							<view class="nickname">
								{{thirdUser.nickname? thirdUser.nickname:"Unkown"}}
							</view>
						</view>
						<view class="score" v-if="usertype != 1 && thirdUser.userscore">
							<!-- <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image> -->
							<view class="money">
								{{thirdUser.userscore.toLocaleString()}}
							</view>
						</view>
					</view>
					<view class="rank-norml" v-for="(item,index) in list" :key="item._id">
						<view class="rank-num">
							<text>{{index + 4}}</text>
						</view>
						<view class="header">
							<image class="icon" :src="item.avatar?item.avatar:'../../static/logo.png'" mode="aspectFill"></image>
							<view class="nickname">
								{{item.nickname? item.nickname:"Unkown"}}
							</view>
						</view>
						<view class="money" v-if="usertype != 1 && item.userscore">
							<text>{{item.userscore.toLocaleString()}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getStatusBarHeight,
		getNavBarHeight,
		rpxToPx,
		pxToRpx
	} from "@/utils/system.js"
	import {
		onLoad,
		onShow,
		onReady,
		onBackPress
	} from "@dcloudio/uni-app"
	import {
		getTodayDateString
	} from '../../utils/common.js'
	const items = ref(['日榜', '总榜'])
	const dayList = ref([])
	const totalList = ref([])
	const list = ref([])

	const current = ref(0)
	const usertype = ref(0)

	const firstUer = ref({})
	const secondUser = ref({})
	const thirdUser = ref({})

	const gameid = ref("")
	const gameName = ref("")
	const bgOpacity = ref(1.0)

	const rankbg = ref("../../static/bg_rank.png")

	onLoad(e => {
		console.log("rankParam:", JSON.stringify(e));
		usertype.value = e.usertype;
		if (e.gameid) {
			gameid.value = e.gameid
			gameName.value = e.gamename
		}
		if (e.gamebg) {
			rankbg.value = e.gamebg
			bgOpacity.value = 0.8
		}
	});

	onShow(() => {
		if (usertype.value == 2) {
			if (gameid.value != '') {
				queryGameRankById(gameid.value)
			} else {
				queryDayRank()
			}
		}
	})

	function onClickItem(e) {
		if (usertype.value != 2) {
			return;
		}
		if (e.currentIndex == 0) {
			if (dayList.value.length > 0) {
				let arr = JSON.parse(JSON.stringify(dayList.value));
				if (arr.length >= 1) {
					firstUer.value = arr[0]
				}
				if (arr.length >= 2) {
					secondUser.value = arr[1]
				}
				if (arr.length >= 3) {
					thirdUser.value = arr[2]
				}
				if (arr.length >= 3) {
					list.value = arr.splice(3, arr.length);
				}
			} else {
				queryDayRank()
			}
		} else {
			if (totalList.value.length > 0) {
				let arr = JSON.parse(JSON.stringify(totalList.value));

				if (arr.length >= 1) {
					firstUer.value = arr[0]
				}
				if (arr.length >= 2) {
					secondUser.value = arr[1]
				}
				if (arr.length >= 3) {
					thirdUser.value = arr[2]
				}

				if (arr.length >= 3) {
					list.value = arr.splice(3, arr.length);
				}
			} else {
				queryTotalRank()
			}
		}
	}

	async function queryGameRankById(gameid) {
		uni.request({
			url: 'https://fc-mp-b4609b89-f010-4b4d-8ed3-0087451c83a0.next.bspapp.com/getRank/getGameRankById',
			data: {
				'gameid': gameid
			},
			method: 'POST',
			success: (userInfo) => {
				if (userInfo && userInfo.data && userInfo.data.data) {
					let arr = userInfo.data.data
					if (arr.length >= 1) {
						firstUer.value = arr[0]
					}
					if (arr.length >= 2) {
						secondUser.value = arr[1]
					}
					if (arr.length >= 3) {
						thirdUser.value = arr[2]
					}

					dayList.value = JSON.parse(JSON.stringify(arr));
					if (arr.length >= 3) {
						list.value = arr.splice(3, arr.length);
					}
				}
			}
		})
	}

	function addCommas(x) {
		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}

	async function queryDayRank() {
		uni.request({
			url: 'https://fc-mp-b4609b89-f010-4b4d-8ed3-0087451c83a0.next.bspapp.com/getRank/getRankByDay',
			data: {
				gameId: gameid.value
			},
			method: 'POST',
			success: (userInfo) => {
				if (userInfo && userInfo.data && userInfo.data.data) {
					let arr = userInfo.data.data
					if (arr.length >= 1) {
						firstUer.value = arr[0]
					}
					if (arr.length >= 2) {
						secondUser.value = arr[1]
					}
					if (arr.length >= 3) {
						thirdUser.value = arr[2]
					}
					
					dayList.value = JSON.parse(JSON.stringify(arr));
					if (arr.length >= 3) {
						list.value = arr.splice(3, arr.length);
					}
				}
			}
		})
	}



	async function queryTotalRank() {
		uni.request({
			url: 'https://fc-mp-b4609b89-f010-4b4d-8ed3-0087451c83a0.next.bspapp.com/getRank/getRankByTotal',
			method: 'POST',
			success: (userInfo) => {
				if (userInfo && userInfo.data) {
					let arr = userInfo.data.data
					if (arr.length >= 1) {
						firstUer.value = arr[0]
					}
					if (arr.length >= 2) {
						secondUser.value = arr[1]
					}
					if (arr.length >= 3) {
						thirdUser.value = arr[2]
					}
					
					totalList.value = JSON.parse(JSON.stringify(arr));
					if (arr.length >= 3) {
						list.value = arr.splice(3, arr.length);
					}
				}
			}
		})
	}

	function goBack() {
		uni.navigateBack({
			success: () => {},
			fail: () => {
				uni.reLaunch({
					url: '/pages/index/shouye'
				})
			}
		})
	}
</script>

// <!-- // scss 语言类型  scoped css样式的类名仅限当前页面 不污染其它页面 -->
<style lang="scss">
	
	
	.layout {
		width: 100%;
		height: 100vh;
		position: relative;

		.goBack {
			position: fixed;
			margin-left: 10rpx;
			width: 100%;
			height: 38px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			z-index: 1000;

			.backbtn {
				background: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				backdrop-filter: blur(10rpx);
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			text {
				color: #333;
				font-size: 40rpx;
				font-weight: 600;
			}

			.kong {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.bg {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			height: 100%;
			opacity: 1.0;

			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.rankbg {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			height: 100%;
		
			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			position: absolute;
			top: 160rpx;
			left: 0rpx;
			// margin-top: 160rpx;
			// margin-left: 0rpx;
			width: 100%;
			height: calc(100vh - 100rpx);

			.segmented {
				position: relative;
				margin: auto;
				width: 400rpx;
				height: 70rpx;
				background-color: white;
			}

			.scroll-Y {
				position: relative;
				margin-top: 0rpx;
				width: 100%;
				height: calc(100vh - 280rpx);
			}

			.rank-list {
				position: relative;
				width: 100%;
				margin-top: 50rpx;
				height: 100%;

				.rank-first {
					position: relative;
					margin-left: 50rpx;
					width: calc(100vw - 100rpx);
					height: 200rpx;
					margin-top: 20rpx;
					position: relative;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 20rpx;

					.bg {
						position: absolute;
						margin-left: 10rpx;
						margin-top: 0rpx;
						width: 273rpx;
						height: 80rpx;
					}

					.header {
						position: relative;
						width: 150rpx;
						height: 150rpx;
						top: 50rpx;
						margin-left: 80rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							height: 100rpx;
							width: 100rpx;
							border-radius: 50%;
						}

						.nickname {
							display: inline-block;
							margin-top: 10rpx;
							width: 100%;
							height: 30rpx;
							color: white;
							font-size: 25rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						
					}
					

					.score {
						position: absolute;
						top: 90rpx;
						left: 180rpx;
						height: 60rpx;
						width: 550rpx;
						align-items: center;
						display: flex;
						flex-direction: row;
						font-size: 22px;
						font-weight: 700;
						margin-left: 30rpx;
						padding: 5rpx 10rpx;
						border-radius: 45rpx;

						.nickname {}

						.money {
							color: white;
							margin-left: 20rpx;
							margin-right: 20rpx;
							font-size: 55rpx;
							color: #efefef;
						}
					}
				}

				.rank-norml {
					display: flex;
					position: relative;
					margin-left: 50rpx;
					width: calc(100vw - 100rpx);
					height: 140rpx;
					margin-top: 20rpx;
					position: relative;
					background-color: $uni-bg-color-mask;
					border-radius: 20rpx;
					align-items: center;
					justify-content: flex-start;

					.rank-num {
						margin-left: 10rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						backdrop-filter: blur(10rpx);
						border: 1rpx solid rgba(255, 255, 255, 0.3);
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							color: white;
							font-size: 26rpx;
						}
					}

					.header {
						position: relative;
						width: 160rpx;
						height: 120rpx;
						top: 10rpx;
						margin-left: 0rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							height: 80rpx;
							width: 80rpx;
							border-radius: 50%;
						}

						.nickname {
							display: inline-block;
							margin-top: 5rpx;
							width: 100%;
							height: 30rpx;
							color: white;
							font-size: 25rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}

					.money {
						margin-left: 30rpx;
						margin-top: 0rpx;
						width: 200rpx;
						height: 60rpx;

						text {
							width: 100%;
							height: 100%;
							color: white;
							font-size: 55rpx;
							color: #efefef;
						}

					}

				}
			}

		}

	}
</style>